<template>
	<view>
    <!-- 搜索 -->
		<view class="serch-box">
      <!-- 引用uniapp官方扩展组件 -->
      <!-- 修改了内部源码 data 中的数据show showsync 做到了自动获取焦点 -->
		  <uni-search-bar  @input="input" cancelButton="none" :bgColor="'#fff'" :bgc="'#C00000'" radius="15"></uni-search-bar>
		</view>
    <!-- 渲染搜索项目 -->
    <view class="serch-results" v-if="key">
      <view v-if="serchResults.length > 0">
        <view class="serch-item" v-for="item in serchResults" :key="item.goods_id" @click="gotoDetail(item)">
          <view class="serch-name">
            {{item.goods_name}}
          </view>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
      <view v-else>{{tit}}</view>
    </view>
    <!-- 搜索历史 -->
    <view class="history" v-else>
      <view class="history-title">
         <text>搜索历史</text>
         <uni-icons type="trash" size="17" @click="clearHistory"></uni-icons>
      </view>
      <view class="histroy-lis" >
        <uni-tag :text="i" v-for="(i,m) in historys" :key="m" @click="historyPush(i)"></uni-tag>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
         timer: null,
         key: '',
         serchResults: [] ,// 搜索建议
         serchHistroy: JSON.parse(uni.getStorageSync('kw')|| '[]'),
         tit: ''
			}
		},
    onLoad() {
      // this.serchHistroy = JSON.parse(uni.getStorageSync('kw'|| '[]'))
    },
    methods: {
      input(e) { // 输入事件
       clearTimeout(this.timer) // 清除上一次的操作
       this.timer = setTimeout(_ => { //防抖
          this.key = e.value
          this.getSerchResults()
        },500)
      },
      async getSerchResults() { // 搜索请求
        if (this.key === '') return this.serchResults = []
        const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', {query: this.key})
        if (res.meta.status !== 200) return uni.$showMsg()
        this.serchResults = res.message
        if (this.serchResults.length === 0) {
          this.tit = '暂无数据'
        }
      },
      gotoDetail (data) { // 点击搜索建议
        // const kw = data.goods_name.slice(0,3)
        // if (!this.serchHistroy.includes(kw)) {
          // this.serchHistroy.push(kw)
          // 利用set来解决数组重复问题
          // 要实现的效果就是：每次搜索的最新数据会被保存到最前面，且不会出现重复的搜索记录
          const set = new Set(this.serchHistroy) // 得到一个基准数组
          set.delete(this.key) // 首先将之前同名的删除
          set.add(this.key) // 再将最新的加进去
          // set伪数组转化数组
          // this.serchHistroy = [...set]
          this.serchHistroy = Array.from(set)
          uni.setStorageSync('kw',JSON.stringify(this.serchHistroy))
        // }
        uni.navigateTo({ // 跳转到商品详情页面
          url:'../goods_detail/goods_detail?goods_id=' + data.goods_id 
        })
      },
      clearHistory () { // 清除搜索历史
        uni.setStorageSync('kw', '[]')
        this.serchHistroy = []
      },
      historyPush (kw) { //点击搜索历史跳转到商品列表页面
        uni.navigateTo({
          url: '../goods_list/goods_list?query=' + kw
        })
      }
    },
    computed: {
      historys() { // 最新搜索的在最前面
        return [...this.serchHistroy].reverse()
      }
    }
	}
</script>

<style lang="scss">
.serch-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
.serch-item {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #efefef;
  .serch-name {
    white-space: nowrap; // 不许换行
    font-size: 14px;
    overflow: hidden; // 超出部分隐藏
    text-overflow: ellipsis; // 文本溢出后用...代替
    margin-right: 3px;
  }
}
.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5px;
  font-size: 13px;
  border-bottom: 1px solid #efefef;
}
.histroy-lis {
  display: flex;
  flex-wrap:wrap;
  padding: 0 10px;
  .uni-tag {
        max-width: 100px;
        margin-top: 5px;
        margin-right: 5px;
        white-space: nowrap; // 不许换行
        // font-size: 14px;
        overflow: hidden; // 超出部分隐藏
        text-overflow: ellipsis; // 文本溢出后用...代替
      }
}
</style>
